<template>
  <a-card :bordered="false" title="">
    <a-spin :spinning="myLoading">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="人员姓名">
                <a-input v-model="queryParam.userName" placeholder="请输入人员姓名"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="getData()">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => {queryParam = {};getData()}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-page-search-wrapper">
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="add">添加人员</a-button>
          <a-button type="primary" icon="download" @click="downFile">模板下载</a-button>
          <a-upload :customRequest="downloadFilesCustomRequest" :fileList="[]">  
            <a-button type="primary" icon="upload">人员导入</a-button>
          </a-upload>
        </div>
        <a-table
          class="components-table-demo-nested"
          ref="table" 
          :columns="columns" 
          :row-key="record => record.id" 
          :data-source="data" 
          :pagination="pagination"
          @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
            <a @click="edit(record)">编辑</a>
            <a-divider type="vertical" />
            <!-- <a @click="edit(record)">预览</a>
                    <a-divider type="vertical" /> -->
            <a-popconfirm title="是否删除该条记录?" @confirm="del(record)" @cancel="cancel" okText="是" cancelText="否" >
              <a href="#">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
    </a-spin>
    <userAddModal ref="modal" @ok="handleOk"></userAddModal>
  </a-card>
</template>

<script>
  import userAddModal from './modules/userAddModal'
  import { getUrl,postAxiosUrl,uploadUrl } from '@/api/manage'
  import my from '@/api/my/my'
  export default {
    components: {
      userAddModal
    },
    data() {
      return {
        defaultActiveKey : '',
        activeKey : '',
        columns: [
          {dataIndex:'userName',title: '姓名'},
          {dataIndex:'userSex',title: '性别'},
          {dataIndex:'userBranch',title: '部（系）'},
          {dataIndex:'userTeach',title: '教研室'},
          {dataIndex:'userTitle',title: '职称'},
          {dataIndex:'userEducation',title: '学历'},
          {dataIndex:'userDegree',title: '学位'},
          {title: '操作',width : 130,fixed: 'right',scopedSlots: { customRender: 'action' }}
        ],
        data: [],
        pagination: {},
        myLoading: false,
        pagination: {size:'small'},
        queryParam:{},
      }
    },
    mounted() {
        this.getData()
    },
    methods: {
      downFile () {
        const a = document.createElement('a')
        a.href = my.baseURL + `userManage/downloadExcel` // 这里的请求方式为get，如果需要认证，接口上需要带上token
        a.click()
      },
       // 重写a-upload的文件上传处理方式
      downloadFilesCustomRequest (data) {  
          this.confirmLoading = true
          this.saveFile(data)  
      },
      // 上传并保存文件
      saveFile (data){  
        var _this = this
        const formData = new FormData()  
        formData.append('file', data.file)  
        uploadUrl('userManage/upload',formData).then((res) => {
          console.log(res)
          if (res.data.success){
            _this.confirmLoading = false
             _this.$message.info(res.data.result)
             _this.queryParam = {}
            _this.getData()
          }else{
            _this.confirmLoading = false
            _this.$message.error(res.data.error)
          }
        })
      },
      dateFilter(value){
        var date = new Date(value)
        var year = date.getFullYear() + '年'
          var month = date.getMonth()+1 + '月'
          var day = date.getDate() + '日 '
          var hour = (date.getHours() < 10 ?('0' + date.getHours()) : date.getHours())+ ':'
          var min = (date.getMinutes() < 10 ?('0' + date.getMinutes()) : date.getMinutes())+ ':'
          var sec = (date.getSeconds() < 10 ?('0' + date.getSeconds()) : date.getSeconds())
        var formatDate = year + month + day + hour +min +sec
        return formatDate
      },
      handleOk(){
          this.getData()
      },
      add(){
        this.$refs.modal.add()
      },
      edit(record) {
        this.$refs.modal.edit(record)
      },
      del(record) {
        var _this = this
        _this.confirmLoading = true
        postAxiosUrl('userManage/del', record)
        .then(res => {
          if(res.success){
            _this.confirmLoading = false
            _this.$message.info('删除成功')
            _this.getData()
          }
        })
      },
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination)
        const pager = { ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.getData({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        })
      },
      getData(params = {}) {
          var _this = this
           _this.myLoading = true
           params['userName']=_this.queryParam.userName
          getUrl('userManage/getAll', params)
            .then(res => {
               _this.myLoading = false
              _this.data = res.result.data
              
              const pagination = { ...this.pagination }
              // Read total count from server
              pagination.total = res.result.totalCount
              pagination.showTotal = total => `共 ${total} 条`
              pagination.showQuickJumper = true
              this.pagination = pagination

            })
        
      },
      cancel(e) {
      },
      subCallback(key) {
        this.activeKey = key
        this.getData(key)
      }
    }
  }
</script>
<style>

</style>